<template>
  <mu-container>
    <mu-form ref="form" :model="loginForm" class="login-form">
      <!-- <mu-form-item :rules="usernameRules"> -->
      <mu-text-field
        help-text="用户名为你注册的手机号码"
        label="用户名"
        v-model="loginForm.tel"
        prop="tel"
        label-float
        icon="account_circle"
        class="username"
      ></mu-text-field>
      <!-- </mu-form-item> -->
      <!-- <mu-form-item  prop="password" :rules="passwordRules"> -->
      <mu-text-field
        :rules="passwordRules"
        label="密码"
        type="password"
        v-model="loginForm.password"
        prop="password"
        label-float
        icon="locked"
        class="password"
      ></mu-text-field>
      <br />
      <!-- </mu-form-item> -->
      <!-- <mu-form-item prop="isAgree" :rules="argeeRules">
          <mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
      </mu-form-item>-->
      <mu-button color="primary" @click="submit" class="btn">提交</mu-button>
      <mu-button @click="clear">重置</mu-button>
    </mu-form>
  </mu-container>
</template>

<script>
import { postKeyValueRequest } from "../utils/api";
import { userListDeclare } from "../utils/api";

export default {
  name: "LoginForm",
  data() {
    return {
      loginForm: {
        tel: "13551633910",
        password: "yxy130522"
      },

      usernameRules: [
        { validate: val => !!val, message: "必须填写用户名" },
        { validate: val => val.length == 11, message: "你注册时的手机号码" }
      ],

      passwordRules: [
        { validate: val => !!val, message: "必须填写密码" },
        {
          validate: val => val.length >= 3,
          message: "密码长度大于3"
        }
      ]
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate().then(result => {
        if (result) {
          postKeyValueRequest("/userLogin", this.loginForm).then(resp => {
            if (resp) {
              alert(JSON.stringify(resp.data.message));
              const userInfo = resp.data.body.id;
              let role = resp.data.body.role;
              sessionStorage.setItem("userInfo", userInfo);
              localStorage.setItem("user", this.loginForm.tel);
              if ("HANDLER" == role) {
                userListDeclare("/listDeclareService", resp.data.body.id).then(
                  resp => {
                    this.$store.dispatch("setDataSource", resp.data.body);
                    this.$router.push({
                      name: "List"
                    });
                  }
                );
              } else {
                userListDeclare(
                  "/userListDeclareService",
                  resp.data.body.id
                ).then(resp => {
                  this.$store.dispatch("setDataSource", resp.data.body);
                  this.$router.push({
                    name: "List"
                  });
                });
              }
            }
          });
        }
      });
    },

    clear() {
      this.$refs.form.clear();
      this.validateForm = {
        username: "",
        password: ""
      };
    }
  }
};
</script>

<style scoped>
.login-form {
  width: 100%;
  /* max-width: 460px; */
  margin: 60px auto;
}

.btn {
  margin-right: 30px;
}
</style>